﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Foreach.aspx.cs" Inherits="Views_Foreach" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript" src="../ViewModels/Foreach.js"></script>
    <style type="text/css">
        .table {        
        display: table;
        font-size: 12px;
        }
            .table div {
                display: table-row;
            }
                .table div span {
                    display: table-cell;
                    padding:5px;
                    border: 1px solid #AAA;
                }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <h3>Foreach</h3>
    <span>The foreach binding duplicates a section of markup for each entry in an array, and binds each copy of that markup to the corresponding array item. This is especially useful for rendering lists or tables.</span>
    <div>
        <div class="code">
<xmp>
<div data-bind="foreach: productList, css: {table:true}">
<div>
    <span data-bind="text: ProductName"></span>
    <span data-bind="text: ProductNumber"></span>
    <span data-bind="text: SafetyStockLevel, 
        style: {backgroundColor: StandardCost < 100 ? 
        (StandardCost < 50 ? 'red': 'yellow'):''}"></span>
    <span data-bind="text: ReorderPoint"></span>
    <span data-bind="text: StandardCost"></span></div>
</div>
</xmp>
        </div>
    </div>
    <h4>Result</h4>
    <div data-bind="foreach: productList, css: {table:true}">
            <div><span data-bind="text: ProductName"></span><span data-bind="text: ProductNumber"></span><span data-bind="text: SafetyStockLevel, style: {backgroundColor: SafetyStockLevel < 100 ? (SafetyStockLevel < 50 ? 'red': 'yellow'):''}"></span><span data-bind="text: ReorderPoint"></span><span data-bind="text: StandardCost"></span></div>
    </div>
    <hr />
    <h3>Context Properties of Foreach</h3>
    <span>A binding context is an object that holds data that you can reference from your bindings. While applying bindings, Knockout automatically creates and manages a hierarchy of binding contexts.</span>
    <div>
        <h5> Using foreach without a container element</h5>
        <div class="code">
<xmp>
<div data-bind="css:{table:true}">
    <!-- ko foreach: months -->
    <div>
        <span data-bind="text: $index"></span>
        <span data-bind="text: $data"></span>
    </div>
    <!-- /ko -->
</div>
</xmp>
        </div>
    </div>
    <h4>Result</h4>
    <div data-bind="css:{table:true}">
        <!-- ko foreach: months -->
        <div><span data-bind="text: $index"></span><span data-bind="text: $data"></span></div>
        <!-- /ko -->
    </div>
</asp:Content>

